<template>
    <div class="addSystem">
        <!--添加数据弹出层-->
        <div class="toolbar">
            <Modal
                    v-model="showAddForm"
                    title="添加"
                    :loading="loading"
                    :mask-closable="maskClosable"
                    :closable="false"
            >
                <div slot="header">
                    <div class="ivu-modal-header-inner">新增系统信息</div>
                    <a class="ivu-modal-close" @click="cancel"><i class="ivu-icon ivu-icon-ios-close-empty"></i></a>
                </div>
                <Form ref="addData" :model="addData" :label-width="80" :rules="ruleCustom" :inline="false" >
                    <FormItem label="系统名称:" prop="name">
                        <Input class="modalInput" v-model="addData.name" placeholder="系统名称"></Input>
                    </FormItem>
                    <FormItem label="描述:" prop="descs">
                        <Input class="modalInput"  v-model="addData.descs" placeholder="描述"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" size="large" :loading="modalLoading"  @click="ok('addData')" >确定</Button>
                    <Button size="large" @click="cancel">取消</Button>

                </div>
            </Modal>
        </div>

    </div>
</template>

<script>
    import util from '../../libs/util'
    export default {
        name: 'addSystem',
        data () {
            return {
                loading: true,
                modalLoading:false,
                maskClosable:false,
                addData: {
                    'name': '',
                    'descs': ''
                }, //添加的数据
                ruleCustom: {
                    name: [
                        { required: true, message: '请填写系统名称', trigger: 'blur' }
                    ]
                }
            }
        },
        props: ['showAddForm'],
        methods: {
            ok (name) {
//        var self = this;
//        this.$emit("changeShow", self.showAddForm);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = '/backcenter-service/api/innersys/add.json'
                        /*获取到添加的数据*/
//                        alert('添加的数据为' + JSON.stringify(this.addData))
                        let data = this.addData
                        console.log(this.addData)
                        /*请求接口*/
                        util.ajax.post(url, data).then((res) => {
//                            let res = res.data.res
                            console.log(res.data.res.msg)
                            if (res.data.code == 0) {
                                this.$Message.success(res.data.res.msg)
                                this.$emit('reset', true)
                            }else{
                                this.$Message.success(res.data.res.msg)
                            }
                        })
                    } else {
                        this.$Message.error(res.data.res.msg);
                    }
                })
            },
            cancel() {
                this.$emit('reset')
            }
        },
        watch: {
            showAddForm() {
                if(this.showAddForm) {
                    this.$refs['addData'].resetFields(); // 每次进来重置表单数据
                }
            }
        }
    }
</script>


<style scoped>

</style>
